/**
 * Created by douxin on 22/09/2016.
 */

import React from 'react';
import ChannelContainer from './ChannelContainer';
import TradeBasicContainer from './TradeBasicContainer';
import AreaContainer from './AreaContainer';
import PaymentContainer from './PaymentContainer';
import GoodsContainer from './GoodsContainer';
import StatusContainer from './StatusContainer';
import RealTimeMsgContainer from './RealTimeMsgContainer';
import FooterContainer from './FooterContainer';

class HomeContainer extends React.Component {

    getTrade() {
        if (this.props.pushTradeIndex >= 0) {
            return this.props.trades[this.props.pushTradeIndex];
        } else {
            return this.props.trades[0];
        }
    }

    renderRealTimeMsg() {
        if (this.props.trades.length > 0) {
            return (
                <div className="col-sm-12 col-md-12 col-lg-12">
                    <RealTimeMsgContainer data={this.getTrade()} type={this.props.pushMsgType}/>
                </div>
            );
        } else {
            return (
                <div className="col-sm-12 col-md-12 col-lg-12">
                    <div className="row">
                        <div className="panel panel-grey-blue">
                            <div className="panel-body msg-container">
                                当前无交易信息
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }

    render() {
        return (
            <div>
                <div className="col-sm-3 col-md-3 col-lg-3">
                    <ChannelContainer data={this.props.trades}/>
                    <StatusContainer data={this.props.trades}/>
                </div>
                <div className="col-sm-6 col-md-6 col-lg-6">
                    <TradeBasicContainer data={this.props.trades} merchant={this.props.merchant}/>
                    <AreaContainer data={this.props.trades}/>
                </div>
                <div className="col-sm-3 col-md-3 col-lg-3">
                    <PaymentContainer data={this.props.trades}/>
                    <GoodsContainer data={this.props.trades}/>
                </div>
                {this.renderRealTimeMsg()}
                <FooterContainer/>
            </div>
        );
    }

}

HomeContainer.propTypes = {
    trades: React.PropTypes.array,
    merchant: React.PropTypes.object,
    pushMsgType: React.PropTypes.string,
    pushTradeIndex: React.PropTypes.number
};

export default HomeContainer;